<template>
  <div class="recommend-top">
    <main-table>
      <a href="" slot="left" class="top-h">榜单</a>
      <!-- 榜单 -->
      <div slot="body" class="slot">
        <!-- 一块 -->
        <div
          class="recommend-body"
          v-for="(item, index) in recommendTop"
          :key="index"
        >
          <div class="top-header">
            <!-- 左 -->
            <div class="left">
              <el-image :src="item.coverImgUrl" alt="" lazy />
              <a href="javascript:;" @click="toTopList(item)"></a>
            </div>
            <!-- 右 -->
            <div class="right">
              <h3>
                <a href="">{{ item.name }}</a>
              </h3>
              <div class="icon">
                <!-- 播放 -->
                <el-tooltip content="播放" placement="bottom" effect="light">
                  <a
                    href="javascript:;"
                    class="icon-left"
                    @click="playAll(item.trackIds.slice(0, 10))"
                  ></a>
                </el-tooltip>
                <!-- 收藏 -->
                <el-tooltip content="收藏" placement="bottom" effect="light">
                  <a href="javascript:;" class="icon-right"></a>
                </el-tooltip>
              </div>
            </div>
          </div>
          <ul @mouseenter="ulIsShow(item)">
            <li
              v-for="(itemLi, indexLi) in item.tracks.slice(0, 10)"
              :key="indexLi"
            >
              <span :class="[indexLi < 3 ? 'spanColor' : 'spanAntherColor']">{{
                indexLi + 1
              }}</span>
              <a
                href="javascript:;"
                class="li-a"
                @mouseenter="liShow(itemLi.id)"
                @mouseleave="liLeave"
                @click="toSong(itemLi.id)"
                >{{ itemLi.name }}
                <!-- 播放按钮 -->
                <div
                  class="icon-li"
                  v-if="lishow === itemLi.id && liType === item.ToplistType"
                >
                  <a
                    href="javascript:;"
                    class="li-left"
                    @click.stop="playOne(itemLi)"
                  ></a>
                  <el-tooltip
                    content="添加到播放列表"
                    placement="bottom"
                    effect="light"
                  >
                    <a href="javascript:;" class="li-center"></a>
                  </el-tooltip>
                  <a href="javascript:;" class="li-right"></a>
                </div>
              </a>
            </li>
            <li class="bottom">
              <a href="javascript:;" @click="toTopList(item)"> 查看全部> </a>
            </li>
          </ul>
        </div>
      </div>
    </main-table>
  </div>
</template>

<script>
import { getSongURL } from '@/api/api.js'
import mainTable from '../../../components/common/mainTable.vue'
export default {
  components: { mainTable },
  props: {
    recommendTop: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      lishow: -1,
      liType: ''
    }
  },
  methods: {
    ulIsShow(item) {
      this.liType = item.ToplistType
    },
    liShow(itemLi) {
      this.lishow = itemLi
    },
    liLeave() {
      this.lishow = -1
    },
    // paly所有
    async playAll(item) {
      let topSongList = []
      for (let item1 of item) {
        const { data: res } = await getSongURL(item1.id)

        topSongList.push(res[0].url)
      }

      this.$store.commit('savaSongURL', [])
      this.$store.commit('savaSongURL', topSongList)
    },

    async playOne(item) {
      let oneSong = []
      const { data: res } = await getSongURL(item.id)

      oneSong.push(res[0].url)
      this.$store.commit('savaSongURL', [])
      this.$store.commit('savaSongURL', oneSong)
    },
    toTopList(item) {
      console.log(item)
      this.$router.push({
        path: '/discover/toplist',
        query: {
          id: item.id
        }
      })
    },
    // 点击排行榜歌曲跳转
    toSong(id) {
      console.log(id)
      this.$router.push({
        path: '/song',
        query: {
          id
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.recommend-top {
  margin-top: 40px;
}
.top-h {
  font-size: 20px;
  margin-bottom: 5px;
}
.slot {
  width: 690px;
  display: flex;
  background: url('https://s2.music.126.net/style/web2/img/index/index_bill.png?89e2d84cf4c26098897322940fea9bf3')
    no-repeat;

  .recommend-body {
    // background: #f4f4f4;
    width: 230px;
    .top-header {
      width: 230px;
      height: 120px;
      padding: 20px 0 0 19px;
      display: flex;
      .left {
        width: 80px;
        height: 80px;
        position: relative;

        .el-image {
          width: 100%;
          height: 100%;
        }
        a {
          display: block;
          width: 100%;
          height: 100%;
          background: url('https://s2.music.126.net/style/web2/img/coverall.png?2ac4f0b43a8fc79457fe419254b2f516');
          position: absolute;
          top: 0;
          left: 0;
          background-position: -145px -57px;
        }
      }
      .right {
        margin-left: 6px;
        .icon-left,
        .icon-right {
          width: 22px;
          height: 22px;
          display: block;
          background: url('https://s2.music.126.net/style/web2/img/index/index.png?6f7122023fe4b0e7c59ac1d1226d1064')
            no-repeat 0 9999px;
        }
        .icon {
          display: flex;
          margin-top: 6px;
          .icon-left {
            margin-right: 10px;
            background-position: -267px -205px;
            &:hover {
              background-position: -267px -235px;
            }
          }
          .icon-right {
            background-position: -300px -205px;
            &:hover {
              background-position: -300px -235px;
            }
          }
        }
      }
    }
  }
  ul {
    li {
      height: 32px;
      // display: flex;
      // justify-content: flex-end;

      span {
        width: 40px;
        height: 32px;
        line-height: 32px;
        font-size: 16px;
        float: left;
        padding-left: 20px;
      }
      .li-a {
        display: block;
        width: 170px;
        height: 32px;
        line-height: 32px;
        float: left;
        margin-left: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: normal;
      }
      .icon-li {
        width: 62px;
        height: 32px;
        float: right;
        // display: flex;
        // align-items: center;
        margin-right: 0px;
        .li-left,
        .li-center,
        .li-right {
          margin-top: 5px;
          float: left;
          display: block;
          height: 17px;
          width: 17px;
          line-height: 32px;
        }
        .li-left {
          background: url('https://s2.music.126.net/style/web2/img/index/index.png?6f7122023fe4b0e7c59ac1d1226d1064')
            no-repeat 0 9999px;
          background-position: -267px -268px;
          &:hover {
            background-position: -267px -288px;
          }
        }
        .li-center {
          margin: 6px 5px 0 5px;
          background: url('https://s2.music.126.net/style/web2/img/icon.png?c9bf0d222768fb74ff9a623f6e0f5926')
            no-repeat 0 9999px;
          background-position: 0 -700px;
          &:hover {
            background-position: -22px -700px;
          }
        }
        .li-right {
          margin-bottom: 2px;
          background: url('https://s2.music.126.net/style/web2/img/index/index.png?6f7122023fe4b0e7c59ac1d1226d1064')
            no-repeat 0 9999px;
          background-position: -297px -268px;
          &:hover {
            background-position: -297px -288px;
          }
        }
      }
    }
  }
}
.spanColor {
  color: #c10d0c;
}
.spanAntherColor {
  color: #666;
}
a:hover {
  text-decoration: underline;
}
.bottom {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 30px;
}
</style>
